<template>
	<view class="container">
		<view class="header nav-header" :style="{backgroundImage:'url('+tui.website+'static/home/img/topbg4.png)',paddingTop:top+'px'}">
			<view class="page-title" style="color: #FFF;">
				<view class="back-btn">
					<tui-icon name="arrowleft" color="#fff" @click="back"></tui-icon>
				</view>
				<text>消息提醒</text>
			</view>
		</view>
		<view class="tui-top" :style="{paddingTop:(35 + top)+'px'}">
			<tui-list-cell @click="href(1)" :arrowRight="true" :arrow="true" :radius="true">
				<view class="tui-message-item">
					<view class="tui-title-box">
						<view class="tui-icon-box" style="position: relative;">
							<image src="../../static/images/edit.png" mode="widthFix"></image>
							<tui-badge type="danger" absolute :scaleRatio="0.8" translateX="40%" top="-6rpx" v-if="msg.m1">{{msg.m1}}</tui-badge>
						</view>
						<view class="tui-title">
							<text class="tit">客服消息</text>
							<text class="memo">提醒客户消费、消耗提醒</text>
						</view>
					</view>
				</view>
			</tui-list-cell>
			<tui-list-cell @click="href(2)" :arrowRight="true" :arrow="true" :radius="true">
				<view class="tui-message-item">
					<view class="tui-title-box">
						<view class="tui-icon-box" style="position: relative;">
							<image src="../../static/images/light.png" mode="widthFix"></image>
							<tui-badge type="danger" absolute :scaleRatio="0.8" translateX="40%" top="-6rpx" v-if="msg.m2">{{msg.m2}}</tui-badge>
						</view>
						<view class="tui-title">
							<text class="tit">流失预警</text>
							<text class="memo">唤醒90天未到店的顾客</text>
						</view>
					</view>
				</view>
			</tui-list-cell>
			<tui-list-cell @click="href(4)" :arrowRight="true" :arrow="true" :radius="true">
				<view class="tui-message-item">
					<view class="tui-title-box">
						<view class="tui-icon-box" style="position: relative;">
							<image src="../../static/images/msg3.png" mode="widthFix"></image>
							<tui-badge type="danger" absolute :scaleRatio="0.8" translateX="40%" top="-6rpx" v-if="msg.m4">{{msg.m4}}</tui-badge>
						</view>
						<view class="tui-title">
							<text class="tit">操作提醒</text>
							<text class="memo">提醒您相应的审核或操作</text>
						</view> 
					</view>
				</view>
			</tui-list-cell>
			<tui-list-cell @click="href(3)" :arrowRight="true" :arrow="true" :radius="true">
				<view class="tui-message-item">
					<view class="tui-title-box">
						<view class="tui-icon-box" style="position: relative;">
							<image src="../../static/images/link.png" mode="widthFix"></image>
							<tui-badge type="danger" absolute :scaleRatio="0.8" translateX="40%" top="-6rpx" v-if="msg.m3">{{msg.m3}}</tui-badge>
						</view>
						<view class="tui-title">
							<text class="tit">小程序绑定</text>
							<text class="memo">提醒您联系顾客绑定小程序</text>
						</view> 
					</view>
				</view>
			</tui-list-cell>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg:{}
			};
		},
		onLoad() {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					// this.scrollH = res.windowWidth * 0.6
				}
			})
		},
		onShow(){
			this.getMsg();
		},
		methods: {
			href(type) {
				uni.navigateTo({
					url: 'lists?type='+type,
				});
			},
			getMsg(){
				this.tui.get('user/api/getMsgNums').then(res=>{
					this.msg = res.data;
				});
			},
			back(){
				uni.navigateBack({
					
				})
			}
		}
	};
</script>

<style lang="scss">
	.container {
		padding:20rpx 0 48rpx;
		.tui-top{padding: 20upx 30upx;}
		.tui-list-cell{
			margin:30upx 0;
			border-radius: 30upx;
			box-sizing: border-box;
		}
		.tui-message-item {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			box-sizing: border-box;

			.tui-title {
				font-size: $uni-font-size-lg;
			}

			.tui-sub-title {
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
				padding-top: 4rpx;
			}

			.tui-title-box {
				display: flex;
				align-items: center;
				justify-content: center;
				.tui-title{
					.tit{
						display: block;
						font-size: 32upx;
					}
					.memo{
						display: block;
						color: #838383;
						font-size: 28upx;
					}
				}
				.tui-icon-box {
					width: 88rpx;
					height: 88rpx;
					color: $uni-text-color-inverse;
					border-radius: $uni-border-radius-lg;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: $uni-spacing-row-base;
				}

				.tui-bg-danger {
					background-color: $uni-color-error;
				}

				.tui-bg-warning {
					background-color: $uni-color-warning;
				}

				.tui-bg-success {
					background-color: $uni-color-success;
				}

				.tui-bg-primary {
					background-color: $uni-color-primary;
				}

				.tui-bg-pink {
					background-color: $uni-color-pink;
				}

				.tui-bg-blue {
					background-color: $uni-color-primary;
				}
			}
		}

		.tui-top {
			margin-top: 20rpx;
		}
	}
</style>
